<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">名师团队</span>
        </h2>
      </header>
      <section class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap" v-if="list.length === 0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam"
              >没有相关数据，小编正在努力整理中...</span
            >
          </section>
          <!-- /无数据提示 结束-->

          <!-- /数据列表 开始-->
          <article class="i-teacher-list">
            <ul class="of">
              <li v-for="(item, index) in list" :key="index">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :href="`/teacher/${item.id}`" :title="item.name">
                      <img :alt="item.name" :src="item.avatar" width="142" />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      :href="`/teacher/${item.id}`"
                      :title="item.name"
                      class="fsize18 c-666"
                      >{{ item.name | filterTeacherName }}</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999">{{ item.intro }}</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{ item.career }}</p>
                  </div>
                </section>
              </li>
            </ul>

            <!-- 公共分页 开始 -->
            <div>
              <div class="paging">
                <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
                <a href="#" title="首页" @click="customPage(1)">首页</a>
                <a href="#" title="前一页" @click="upPage">&lt;</a>
                <a
                  href="#"
                  :title="`第${index + 1}页`"
                  :class="{ 'current undisable': index + 1 == page.current }"
                  v-for="(item, index) in page.pages"
                  :key="index"
                  @click="customPage(index + 1)"
                  >{{ index + 1 }}</a
                >
                <a href="#" title="后一页" @click="nextPage">&gt;</a>
                <a href="#" title="末页" @click="customPage(page.pages)">末</a>
                <div class="clear"></div>
              </div>
            </div>
            <!-- 公共分页 结束 -->
            <div class="clear" />
          </article>
          <!-- /数据列表 结束-->
        </div>
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>


<script>
import teacher from "~/api/teacher/teacher";

export default {
  async asyncData(context) {
    // 定义分页条件
    let page = {
      current: context.route.query.current || 1,
      size: context.route.query.size || 4,
      total: 0,
      // 总页数
      pages: 1,
    };

    // 获取全部的讲师
    let result = await teacher.getListByPage(page.current, page.size);
    // 总条数
    page.total = result.data.total;
    // 总页数
    page.pages = result.data.pages;

    return {
      list: result.data.records,
      page,
    };
  },
  methods: {
    // 下一页
    nextPage() {
      if (this.page.current >= this.page.pages) {
        return false;
      }
      // 查询
      teacher;
      // 拼接url，跳转
      window.location = `/teacher?current=${
        Number(this.page.current) + 1
      }&size=${this.page.size}`;
    },
    // 上一页
    upPage() {
      if (this.page.current <= 1) {
        return false;
      }
      teacher;
      // 拼接url，跳转
      window.location = `/teacher?current=${this.page.current - 1}&size=${
        this.page.size
      }`;
    },
    // 跳转指定页数
    customPage(current) {
      // 拼接url，跳转
      window.location = `/teacher?current=${current}&size=${this.page.size}`;
    },
  },
  filters: {
    filterTeacherName(name) {
      return name[0] + "老师";
    },
  },
};
</script>
